<template>
  <div class="slider">
    <input :value="percent" type="number" maxlength="3" v-on:input="changeTrackStart($event.target.value)" />
    <div @click="changeTrackStart"
         @touchend="changeTrackEnd"
         ref="sliderTrack"
         class="slider-track">
      <div @click.stop="touchThumbStart"
           @touchend.stop="touchThumbEnd"
           @touchmove.stop="touchThumbMove"
           ref="sliderThumb"
           :style="{ left: value + '%' }"
           class="slider-thumb"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    max: {
      default: 100,
      type: Number
    },
    min: {
      default: 0,
      type: Number
    },
    percent: {
      default: 0,
      type: Number
    }
  }, 
  components: {

  },
  data () {
    return {
      value: 0,
      offsetThumb: 0,
      offsetLeft: 0,
      isMoveing: false
    }
  },
  methods: {
    touchThumbStart (e) {
      e.target.className = 'slider-thumb slider-thumb-active'
      this.offsetThumb = e.touches[0].clientX
    },
    touchThumbEnd (e) {
      this.isMoveing = false
      e.target.className = 'slider-thumb'
    },
    touchThumbMove (e) {
      let offset = this.offsetLeft + ((e.touches[0].clientX - this.offsetThumb) / this.$refs.sliderTrack.offsetWidth) * 100
      if (offset > 97) return
      if (offset < 0) return
      if (!this.isMoveing) {
        this.offsetLeft = this.value
        this.value = this.offsetLeft + ((e.touches[0].clientX - this.offsetThumb) / this.$refs.sliderTrack.offsetWidth) * 100
        this.isMoveing = true
        return
      }
      this.value = this.offsetLeft + ((e.touches[0].clientX - this.offsetThumb) / this.$refs.sliderTrack.offsetWidth) * 100
      this.$emit('input', this.value)
    },
    changeTrackStart (e) {
      this.$refs.sliderThumb.className = 'slider-thumb slider-thumb-transition'
      if (e === '') {
        this.value = 0
        return
      }
      if (typeof e === 'string') {
        let num = parseInt(e)
        if (num > 100) num = 100
        if (num < 0) num = 0
        this.value = num
        this.offsetLeft = this.value
        return
      }
      let oWidth = e.target.offsetWidth
      this.value = ((e.touches[0].clientX - e.target.offsetLeft) / oWidth) * 100
      this.offsetLeft = this.value
      this.$emit('input', this.value)
    },
    changeTrackEnd (e) {
      setTimeout(() => {
        this.$refs.sliderThumb.className = 'slider-thumb'
      }, 300)
    }
  },
  created () {

  }
}
</script>

<style scoped lang="less">
.slider-track {
  width: 100%;
  height: 0.5em;
  background: rgba(96,123,255,0.40);
  border-radius: 4px;
  position: relative;
  .slider-thumb {
    height: 1.17em;
    background: #607BFF;
    width: 1.17em;
    position: absolute;
    left: 0;
    top: -0.35em;
    border-radius: 50%;
    transition: height 0.3s, width 0.3s, transform 0.3s, top 0.3s;
  }
  .slider-thumb-active {
    height: 1.5em;
    width: 1.5em;
    top: -0.5em;
    transform: translate3d(-0.15em, 0, 0)
  }
}

.slider-thumb-transition {
  transition: all 0.3s !important;
}

</style>